<template>
    <section class="container">
        <section class="main">
            <!-- 介绍 -->
            <section class="poster">
                <img :src="data.poster" alt="" srcset="" />
            </section>

            <section class="box">
                <section class="block">
                    <section class="upload-tab">
                        <span class="active">上传行驶证</span>
                        <span @click="data.openCasePage">
                            <img src="../../../assets/images/eye.png" alt="" /> 查看样例
                        </span>
                    </section>
                    <!-- 上传行驶证 -->
                    <section class="upload">
                        <section :class="['load-image', data.uploadImageUrl === '' ? '' : 'active']">
                            <section class="load-image-model" @click.prevent="data.uploadFile">
                                <template v-if="data.uploadImageUrl === ''">
                                    <img src="../../../assets/images/picture_xsz.png" alt="" />
                                    <section class="load-image-model-icon">
                                        <section>
                                            <img src="../../../assets/images/icon_pz.svg" alt="" />
                                            <p>上传行驶证（必填）</p>
                                            <i v-if="Number(data.reportType) === 2">（仅支持上海牌查询）</i>
                                        </section>
                                    </section>
                                </template>
                                <template v-else>
                                    <img :src="data.uploadImageUrl" alt="" />
                                </template>
                            </section>
                            <uploadfileVue @base64="data.onUploadFileBase64"></uploadfileVue>
                            <span class="reload" v-if="data.uploadImageUrl !== ''">
                                <img src="../../../assets/images/reset.png" alt="" /> 重拍
                            </span>
                        </section>
                        <!-- 识别配置 -->
                        <section class="select-result" v-if="data.detectionFinish">
                            <span>{{ data.carBrand }} {{ data.carModelDetailed }}</span>
                            <p>VIN码：{{ setVin(data.vin) }}</p>
                        </section>

                        <!-- 勾选阅读协议 -->
                        <section class="checkbox checkbox1">
                            <label>
                                <section>
                                    <cxl-checkbox v-model="data.checked" @onChange="data.checkboxChange" />
                                </section>
                                <section>
                                    我已阅读及同意
                                    <i @click.prevent="data.onOpenProtocol('USER_AGREEMENT')">《用户服务协议》</i>和
                                    <i @click.prevent="data.onOpenProtocol('QUERY_GRANT_INFO')">《报告说明》</i>
                                    <template v-if="Number(data.reportType) === 1">
                                        和
                                        <i @click.prevent="data.onOpenProtocol('QUERY_AUTHORIZATION_INFO')"
                                            >《查询授权说明》</i
                                        >
                                    </template>
                                </section>
                            </label>
                        </section>
                        <!-- 勾选阅读协议 -->
                        <section class="checkbox">
                            <label>
                                <section><cxl-checkbox v-model="data.auth" @onChange="data.checkboxChange" /></section>
                                <section>
                                    我已获得其车辆相关信息授权，我承诺车辆报告仅为车辆评估交易之目的，如有违背，我将承担所有责任，与本平台无关。
                                </section>
                            </label>
                        </section>
                    </section>
                </section>
                <!-- 支付方式 -->
                <section class="pay-method">
                    <section class="li">
                        <h1>支付方式</h1>
                    </section>
                    <section
                        :class="['li', item.disable ? 'disable' : '']"
                        v-for="(item, index) in data.payList"
                        :key="item.text"
                        @click="data.onSelectPay(index)"
                    >
                        <section class="li-way">
                            <img :src="item.icon" alt="" />
                            <section>
                                <p>
                                    {{ item.text }}
                                    <i v-if="item.type === 'yue'">
                                        （剩余
                                        <span>{{ Number(data.walletInfo.total) }}</span>
                                        次 ）
                                    </i>
                                </p>
                            </section>
                        </section>
                        <section :class="['li-checkbox', item.checked ? 'active' : '']">
                            <template v-if="item.checked">
                                <span class="iconfont icon-chenggong"></span>
                            </template>
                            <template v-else>
                                <span class="iconfont icon-weixuanzhong"></span>
                            </template>
                        </section>
                    </section>
                    <section class="detailed">
                        <template v-if="data.selectPayIndex === 0">
                            <template
                                v-if="
                                    (Number(
                                        data.walletInfo.productRemainFreeCountMap.get(data.reportType.toString())
                                    ) || 0) !== 0 ||
                                    (Number(
                                        data.walletInfo.productSystemRemainFreeCountMap.get(data.reportType.toString())
                                    ) || 0) !== 0 ||
                                    (Number(
                                        data.walletInfo.productRemainNumberPackageCountMap.get(
                                            data.reportType.toString()
                                        )
                                    ) || 0) !== 0
                                "
                            >
                                已优惠￥{{ data.price }} 应付￥0.00
                            </template>
                            <template v-else> 应付￥{{ data.price }} </template>
                        </template>
                        <template v-else> 应付￥{{ data.price }}</template>
                    </section>
                </section>
            </section>
        </section>

        <!-- 支付栏 -->
        <section class="pay">
            <section :class="['pay-box', 'ios']">
                <section>
                    待支付：
                    <section class="p">
                        <i>
                            ￥
                            <p v-if="data.selectPayIndex === 0">
                                {{ Number(data.walletInfo.total) > 0 ? '0.00' : data.price }}
                            </p>
                            <p v-else>{{ data.price }}</p>
                        </i>
                        <i class="basic">
                            ￥
                            <p>{{ data.basicPrice }}</p>
                        </i>
                    </section>
                </section>
                <section @click="data.onCreateOrder">
                    <cxl-button round type="primary">
                        {{ data.selectPayIndex === 0 ? (Number(data.walletInfo.total) > 0 ? '查询' : '支付') : '支付' }}
                    </cxl-button>
                </section>
            </section>
        </section>

        <!-- 上传结果 -->
        <Transition name="fade" mode="out-in" appear>
            <section class="upload-result" v-if="data.uploadCompleteVisible">
                <section class="upload-info">
                    <section class="upload-img">
                        <img :src="data.comfirmUploadImageUrl" alt="" srcset="" @click="data.onPreview" />
                        <section class="again" @click="data.uploadFile" v-if="data.comfirmUploadImageUrl">
                            重新上传
                            <uploadfileVue @base64="data.onUploadFileBase64"></uploadfileVue>
                        </section>
                    </section>
                    <h1>车辆识别信息</h1>
                    <h2>请仔细核对车辆VIN码，以便影响查询结果</h2>
                    <section :class="['vin', data.resultVin.length !== 17 ? 'error' : '']">
                        <input
                            type="text"
                            :value="data.resultVin"
                            id="vin"
                            @input="data.onChangeVin"
                            @blur="data.onVinBlur"
                        />

                        <span>
                            <span class="iconfont icon-chuangzuo"></span>
                        </span>
                    </section>
                </section>
                <section class="config" v-if="data.carTypeList.length">
                    <h1>{{ data.carBrand }} {{ data.carModel }} <i>选择配置</i></h1>
                    <section class="config-list">
                        <section
                            :class="['config-li', data.selectCarTypeIndex === index ? 'active' : '']"
                            v-for="(item, index) in data.carTypeList"
                            :key="item.vinParseId"
                            @click="data.onSelectCarType(index)"
                        >
                            <p>{{ item.modelDetail }}</p>
                            <img src="../../../assets/images/icon_xzpz@3x.png" alt="" />
                        </section>
                    </section>
                    <!-- 查询不到也让用户进行下一步 -->
                    <!-- <section class="none" v-else>没有查询到车辆配置，请检查VIN码！</section> -->
                </section>
                <section class="btn">
                    <cxl-button round type="primary" @click="data.onConfirmVin">确认无误</cxl-button>
                </section>
                <!-- <template v-else>
                    <section class="btn">
                        <cxl-button round type="primary" @click="data.uploadFile">
                            重新上传
                            <uploadfileVue @base64="data.onUploadFileBase64"></uploadfileVue>
                        </cxl-button>
                    </section>
                </template> -->
            </section>
        </Transition>

        <dialogVue v-model="data.nonsupportQuery" type="error">
            <template #content>
                <section class="dialog">
                    <h1>抱歉，您上传的行驶证暂不支持查询！</h1>
                    <p>请更换行驶证后再查询</p>
                </section>
            </template>
            <template #operation>
                <cxl-button type="primary">我知道了</cxl-button>
            </template>
        </dialogVue>

        <!-- loading -->
        <loading v-model="data.loadingVisible" @click="data.loadingHide" />

        <!-- 确认弹窗 -->
        <confirmPopupVue
            v-model="confirmPopup.visible"
            :title="confirmPopup.title"
            :content="confirmPopup.content"
            :cancelBtn="true"
            @cancel="confirmPopup.visible = false"
            @confirm="
                () => {
                    confirmPopup.visible = false
                    isConfirmQuit = true
                    router.go(-1)
                }
            "
        ></confirmPopupVue>
    </section>
</template>

<script lang="ts" setup name="detection">
import { reactive, onActivated, onDeactivated, ref } from 'vue'
import dialogVue from '@/components/dialog/Index.vue'
import { Detection } from '.'
import loading from '@/components/loading/Index.vue'
import uploadfileVue from '@/components/uploadFile/Index.vue'
import { onBeforeRouteLeave, useRouter } from 'vue-router'
import confirmPopupVue from '@/components/confirmPopup/Index.vue'
const router = useRouter()
const data = reactive(new Detection())
//不需要校验的路由
const routerRath = ['protocol', 'collision', 'new-energy', 'webview']
//确认弹窗
const confirmPopup = reactive({
    visible: false,
    title: '温馨提示',
    content: '您确定要退出车况查询吗？',
    orderId: ''
})
const isConfirmQuit = ref(false)

//设置vin码第3-10位为*
const setVin = (vin: string) => {
    const arr = vin.split('')
    arr.splice(2, 12, '**********')
    return arr.join('')
}
//页面激活
onActivated(() => {
    //初始化数据
    data.init()
})
//页面卸载
onDeactivated(() => {
    console.log('onDeactivated', router.currentRoute.value.name)
    //监听页面离开后是否重置数据
    if (!routerRath.includes(router.currentRoute.value.name as string)) {
        data.reset()
        isConfirmQuit.value = false
    }
})

//产品还没想到，先保留
onBeforeRouteLeave((to, from, next) => {
    console.log('to', data.uploadImageUrl, data.vin, data.comfirmUploadImageUrl, data.resultVin, isConfirmQuit.value)
    //判断to.name 哪些页面需要弹窗提示
    if ((to.name as string) === 'index') {
        //只要上传了行驶证，退出当前页面则提示用户，进行而且确认
        if (
            (data.uploadImageUrl !== '' && data.vin !== '' && !isConfirmQuit.value) ||
            (data.comfirmUploadImageUrl !== '' && data.resultVin !== '' && !isConfirmQuit.value)
        ) {
            confirmPopup.visible = true
            next(false)
        } else {
            next()
        }
    } else {
        next()
    }
})
</script>

<style scoped lang="scss">
.loading {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.15);
}
.container {
    width: 100%;
    height: 100vh;
    background-color: var(--cxl-color-f4f6f9);
    position: relative;
    overflow: hidden;
    .main {
        height: calc(100% - 6rem);
        width: 100%;
        overflow-y: scroll;
    }
    .box {
        box-sizing: border-box;
        padding: var(--cxl-size-16) var(--cxl-size-16) 5rem var(--cxl-size-16);
        margin-bottom: env(safe-area-inset-bottom);

        .block {
            background-color: var(--cxl-color-white);
            border-radius: var(--cxl-size-6);
            overflow: hidden;
        }
    }
}

.upload-result {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 20;
    background-color: var(--cxl-color-f4f6f9);
    box-sizing: border-box;
    padding: var(--cxl-size-16);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom);
    .upload-info {
        padding: var(--cxl-size-16);
        background-color: var(--cxl-color-white);
        border-radius: var(--cxl-size-6);

        .upload-img {
            position: relative;
            img {
                display: block;
                max-width: 100%;
                max-height: 100vw;
                margin: auto;
            }
            .again {
                display: block;
                position: absolute;
                left: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.5);
                text-align: center;
                line-height: var(--cxl-size-40);
                color: var(--cxl-color-white);
                font-size: var(--cxl-size-14);
                width: 100%;
            }
        }

        h1 {
            font-size: var(--cxl-size-16);
            margin: var(--cxl-size-12) 0;
        }
        h2 {
            font-weight: normal;
            color: var(--cxl-color-f57221);
            font-size: var(--cxl-size-12);
            margin: var(--cxl-size-12) 0;
        }
        .vin {
            height: 3.4rem;
            box-sizing: border-box;
            border-radius: var(--cxl-size-6);
            border: 1px solid var(--cxl-color-999999);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 var(--cxl-size-40) 0 var(--cxl-size-16);
            position: relative;
            overflow: hidden;
            &.error {
                border-color: var(--cxl-color-f57221);
                .iconfont {
                    color: var(--cxl-color-f57221);
                }
            }
            input {
                width: 100%;
                height: 100%;
                border: 0;
                outline: 0;
                background-color: var(--cxl-color-white);
                font-size: var(--cxl-size-15);
                user-select: text;
                -webkit-user-select: text;
            }
            > span {
                position: absolute;
                top: 0;
                right: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 4rem;
                height: 100%;
            }
        }
    }
    .config {
        padding: var(--cxl-size-16) var(--cxl-size-16);
        background-color: var(--cxl-color-white);
        border-radius: var(--cxl-size-6);
        margin-top: var(--cxl-size-12);

        .none {
            font-size: var(--cxl-size-12);
            margin-top: var(--cxl-size-6);
            text-align: center;
            color: var(--cxl-color-999999);
        }
        h1 {
            font-size: var(--cxl-size-15);
            i {
                font-size: var(--cxl-size-12);
                margin-left: var(--cxl-size-6);
            }
        }
        .config-list {
            padding: var(--cxl-size-12) 0 0 0;
        }
        .config-li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: var(--cxl-size-12);
            p {
                margin: var(--cxl-size-6) 0;
                padding: var(--cxl-size-6) 0;
            }
            &:not(:last-child) {
                border-bottom: 1px solid var(--cxl-color-f0f0f0);
            }

            img {
                width: 2rem;
                height: 2rem;
                display: block;
                opacity: 0;
            }
            &.active {
                img {
                    opacity: 1;
                }
                p {
                    color: var(--cxl-color-primary);
                }
            }
        }
    }
    .btn {
        margin: var(--cxl-size-10) 0 var(--cxl-size-40) 0;
        > section {
            margin: var(--cxl-size-6) 0;
            position: relative;
        }
        .none {
            background-color: #ccc;
            transition: all 0.35s;
        }
    }
}

.poster {
    position: relative;
    img {
        display: block;
        width: 100%;
    }
}
.upload-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-image: url('../../../assets/images/look-case-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: var(--cxl-size-45);
    box-sizing: border-box;
    padding: 0 var(--cxl-size-16);
    span {
        font-size: var(--cxl-size-14);
        font-weight: 400;
        display: flex;
        align-items: center;
        img {
            display: block;
            width: var(--cxl-size-18);
            height: var(--cxl-size-18);
            margin-right: var(--cxl-size-6);
        }
    }
    .active {
        display: block;
        font-weight: 600;
        color: var(--cxl-color-primary);
        position: relative;
        font-size: var(--cxl-size-18);
    }
}
.upload {
    width: 100%;
    background-color: var(--cxl-color-white);
    box-sizing: border-box;
    padding: 0 var(--cxl-size-16) var(--cxl-size-16) var(--cxl-size-16);
    border-radius: 0 0 var(--cxl-size-6) var(--cxl-size-6);
    position: relative;
    overflow: hidden;
    h1 {
        font-size: var(--cxl-size-18);
    }

    .reload {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2.7rem;
        background-color: rgba(0, 0, 0, 0.5);
        text-align: center;
        color: var(--cxl-color-white);
        font-size: var(--cxl-size-14);
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            display: block;
            width: var(--cxl-size-14);
            height: var(--cxl-size-14);
            margin-right: var(--cxl-size-8);
        }
    }
    .load-image {
        width: 100%;
        box-sizing: border-box;
        max-height: 18.5rem;
        border-radius: 0.5rem;
        // border: 2px dashed var(--cxl-color-999999);
        background-color: var(--cxl-color-white);
        margin: var(--cxl-size-10) 0 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        &.active {
            border: none;
        }
        .load-image-model {
            width: 100%;
            height: 100%;
            position: relative;
            img {
                display: block;
                width: 100%;
                height: 100%;
            }
            .load-image-model-icon {
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0);
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                > section {
                    text-align: center;
                    color: var(--cxl-color-999999);

                    img {
                        display: block;
                        margin: auto;
                        width: var(--cxl-size-24);
                        height: var(--cxl-size-24);
                    }
                    p {
                        font-size: var(--cxl-size-15);
                        color: var(--cxl-color-white);
                        margin: 8px 0 4px 0;
                    }
                    i {
                        font-size: var(--cxl-size-12);
                        color: var(--cxl-color-white);
                    }
                }
            }
        }
    }
}
.select-result {
    border-radius: var(--cxl-size-6);
    border: 1px solid var(--cxl-color-primary);
    box-sizing: border-box;
    padding: var(--cxl-size-16);
    margin-top: var(--cxl-size-16);
    background-color: var(--cxl-color-effff2);
    position: relative;
    &::after {
        content: '';
        display: block;
        width: var(--cxl-size-12);
        height: var(--cxl-size-12);
        background-color: var(--cxl-color-effff2);
        position: absolute;
        top: 0;
        left: 50%;
        border-top: 1px solid var(--cxl-color-primary);
        border-right: 1px solid var(--cxl-color-primary);
        transform: rotate(-45deg) translate(0.38rem, -50%);
    }
    span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: bold;
        color: var(--cxl-color-333333);
        font-size: var(--cxl-size-16);
    }
    p {
        margin-top: var(--cxl-size-10);
        color: var(--cxl-color-666666);
        font-size: var(--cxl-size-15);
    }
}

.checkbox {
    font-size: var(--cxl-size-12);
    margin-top: var(--cxl-size-10);
    &.checkbox1 {
        margin-top: var(--cxl-size-12);
    }
    label {
        display: flex;
        justify-content: space-between;
        > section {
            &:nth-child(1) {
                width: 1.5rem;
                margin-top: 0.1rem;
            }
            &:nth-child(2) {
                width: calc(100% - 2rem);
            }
        }
    }
    i {
        font-style: normal;
        color: var(--cxl-color-success);
    }
}
.pay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: var(--cxl-color-white);
    padding: var(--cxl-size-12);
    font-size: var(--cxl-size-12);
    box-sizing: border-box;
    min-height: 6rem;
    display: flex;
    align-items: center;
    .pay-box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &.ios {
            padding-bottom: env(safe-area-inset-bottom);
        }
        i {
            font-style: normal;
            font-size: var(--cxl-size-15);
            color: var(--cxl-color-f57221);
            font-weight: bold;
            display: flex;
            align-items: center;
            p {
                color: var(--cxl-color-f57221);
                font-size: var(--cxl-size-24);
                display: inline;
            }
            &.basic {
                color: var(--cxl-color-999999);
                text-decoration: line-through;
                margin-left: var(--cxl-size-10);
                font-weight: normal;
                p {
                    color: var(--cxl-color-999999);
                    font-size: var(--cxl-size-18);
                }
            }
        }
        > section:nth-child(1) {
            width: calc(100% - 10rem);
            display: flex;
            align-items: center;
        }
        > section:nth-child(2) {
            width: 10rem;
        }
        .p {
            display: flex;
            align-items: center;
        }
    }
}

.pay-method {
    width: 100%;
    background-color: var(--cxl-color-white);
    box-sizing: border-box;
    padding: var(--cxl-size-16);
    margin-top: var(--cxl-size-12);
    border-radius: var(--cxl-size-6);
    h1 {
        font-size: var(--cxl-size-16);
    }
    .li {
        // border-bottom: 1px solid var(--cxl-color-f0f0f0);
        padding: var(--cxl-size-12) 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // h1 {
        //     display: flex;
        //     align-items: flex-end;
        //     width: 100%;
        //     p {
        //         font-size: var(--cxl-size-12);
        //         color: var(--cxl-color-ff5448);
        //         margin-left: var(--cxl-size-10);
        //     }
        // }

        &.disable {
            filter: grayscale(1);
            opacity: 0.6;
        }
        .li-way {
            display: flex;
            align-items: center;

            p {
                font-size: var(--cxl-size-16);
            }
            i {
                font-size: var(--cxl-size-12);
                color: var(--cxl-color-666666);
                span {
                    font-size: var(--cxl-size-14);
                    color: var(--cxl-color-FD5B20);
                }
            }
        }
        img {
            display: block;
            width: 2rem;
            height: 2rem;
            margin-right: var(--cxl-size-12);
        }
        .li-checkbox {
            > span {
                font-size: var(--cxl-size-18);
            }
            color: var(--cxl-color-666666);
            &.active {
                color: var(--cxl-color-primary);
            }
        }
    }
    .detailed {
        padding-top: var(--cxl-size-12);
        font-size: var(--cxl-size-14);
        text-align: right;
        .basic {
            text-decoration: line-through;
            color: var(--cxl-color-666666);
        }
    }
}

.dialog {
    text-align: center;
    h1 {
        font-size: var(--cxl-size-16);
    }
    p {
        font-size: var(--cxl-size-12);
        color: var(--cxl-color-666666);
        margin: var(--cxl-size-12) 0;
    }
}
</style>
